<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich">

   <body>
      <ui:composition template="/templates/template.xhtml">

         <ui:define name="title">RichFaces Simple Own Tree Sample</ui:define>

         <ui:define name="head">
            <style>
               /*** Panel ***/
               .wh-panel {             /* panel itself */
                  padding: 0;                   /* avoid extra spacing betwenn haeder area and panel border */
                  border-color: #AAA;           /* =tableBorderColor */
               }
               .wh-panel .rf-p-hdr {   /* panel header */
                  font-size: 120%;              /* same as table header fontsize */
                  padding: 5px;
               }
               .wh-panel .rf-p-b {     /* panel body */
                  height: 351px;
                  overflow: auto;               /* activate automatic scrolling of body content */
                  padding: 0;                   /* deactivate padding in panel body */
                  border-top: 1px solid #AAA;   /* =tableBorderColor */
               }
               /*** Tree ***/
               .wh-tree {                       /* top and left padding of the tree in the panel body */
                  padding: 3px 0 0 5px;
               }
               .wh-tree .rf-trn {               /* make the tree line fully visible in order to trigger the scrolling mechanism activated in the panel body */
                  overflow: visible;
               }
               .wh-tree .rf-trn-sel,
               .wh-tree .rf-trn-sel .drag-item {
                  background-color: #DFEEFF;    /* background color of selected and dragged tree node */
               }
               /* special tree root node handling */
               .wh-tree .wh-treenode-root {
                  background: transparent;      /* supress vertical bar on top of root node */
               }
               .wh-tree .wh-treenode-root .rf-trn-hnd {
                  display: none;                /* suppress toggle handle (+/-) */
               }
               .wh-tree .rf-tr-nd .rf-tr-nd {
                  margin-left: 0;               /* suppress left margin of node under the root node */
               }
               .wh-tree .rf-tr-nd .rf-tr-nd .rf-tr-nd {
                  margin-left: 16px;            /* reapply left margin to all nodes starting with second level */
               }
               /*** Table ***/
               .wh-table {
                  overflow: visible;            /* to show drop down menu */
               }
               /* Table main header */
               .wh-table .rf-edt-tbl-hdr {
                  padding: 5px;                 /* padding for drop down menu icon also */
               }
               .wh-table .rf-edt-tbl-hdr .wh-header-text {   /* table main header text */
                  font-size: 120%;
                  padding: 1px;
                  display: block;
               }
               /* Drop down menu */
               .wh-table .rf-ddm-lbl {       /* icon (anchor) in table header */
                  float: left;               /* position */
                  padding: 0;
                  border: 0;
               }
               .wh-table .rf-ddm-pos {       /* menu */
                  text-align: left;          /* correct current alignment */
               }
               .wh-table .rf-ddm-itm-dis {   /* disabled menu items */
                  padding-left: 3px;         /* correction misalignment of diabled items */
               }
               /* Table colum header */
               .wh-table .rf-edt-hdr-c-cnt {
                  white-space: pre;          /* avoid line break in header, since footer is damaged after column resizing */
               }
               /* Table rows */
               .wh-table .rf-edt-c-cnt {
                  white-space: pre;          /* content shall be displayed as it is */
               }
               .wh-table .wh-table-row {
                  cursor: pointer;           /* selection pointer for table rows */
               }
               .wh-table .rf-edt-r-act {
                  font-weight: normal;       /* active (last selected) row: normal font, not bold */
               }
               .wh-table tr.rf-edt-r-sel,
               .wh-table tr.rf-edt-r-sel:hover,
               .wh-table tr.rf-edt-r-sel .drag-item,
               .wh-table tr.rf-edt-r-sel:hover .drag-item {
                  background-color: #DFEEFF; /* selected row, even it is hovered */
               }
               .wh-table .wh-table-row:hover,
               .wh-table .wh-table-row:hover .drag-item {
                  background-color: #ECF4FE; /* other row hoverd with cursor */
               }
               /* Table footer */
               .wh-table .rf-edt-ftr {       /* column footer shall fully dispear */
                  display: none;
               }
               .wh-table .rf-edt-tbl-ftr {   /* table main footer */
                  padding: 6px;              /* smaller padding */
               }
               /* - do not apply the rfs-ctn skinning class to button or at any higher level, otherwise we will see interferences
                  - requieres enableControlSkinning set to true (default) in web.xml */
               .wh_button_pane input,
               .wh_button_pane input:hover,
               .wh_button_pane input:active,
               .wh_button_pane input:focus
               {                                   /* keep background color as defined by skin */
                  background-repeat: no-repeat;    /* show button icon once */
                  background-position: 5px center; /* button icon position */
                  border: 1px solid;
                  border-color: #dfeeff #3e638f #3e638f #dfeeff;
                  margin: 0 7px;                   /* spacing between buttons */
                  padding: 3px 3px 3px 25px;
                  width: 7.5em;
                  font-weight: bold;
                  text-align: left;
               }
               .wh_button_pane input:hover {
                  background-color: #b3cdef;
                  border-color: #3e638f #dfeeff #dfeeff #3e638f;
                  cursor: pointer;
               }
               .wh_button_pane input[disabled] {
                  background-position: 5px center; /* needed: same values as above */
                  background-color: #d1deef;
                  border-color: #dfeeff #839dbf #839dbf #dfeeff;
                  cursor: inherit;
               }
               /*** Drag and Drop */
               .drag-item {                     /* when dragged item is standalone alone: when it is dragged */
                  background-color: #DFEEFF;
                  padding: 1px 3px;
                  display: inline;
                  cursor: pointer;              /* move cursor during dagging */
               }
               .wh-table .drag-item,
               .wh-tree .drag-item {            /* when dragged item is embedded in table or tree: default layout */
                  background-color: #FFF;
                  border: 0 none;
                  padding: 0;
               }
            </style>
         </ui:define>

         <ui:define name="body">

            <h:form id="form" prependId="false">

               <div style="width:15%; float:left; ">
                  <rich:panel id="panel-tree" header="Tree Panel" styleClass="wh-panel">
                     <rich:tree id="tree" value="#{bean.tree.rootNodes}" var="node"
                                nodeType="#{node.type}" styleClass="wh-tree"
                                toggleType="client" selectionType="ajax" selection="#{bean.tree.selectionRowKeys}"
                                render="@none">
                        <a4j:ajax execute="@this" event="mouseup" listener="#{bean.tree.mouseupSelectionChange}"
                                  render="table"/>

                        <rich:treeNode type="LabelDataItem" expanded="#{true}" styleClass="wh-treenode-root">
                           <a4j:outputPanel styleClass="drag-item">
                              <rich:dropTarget acceptedTypes="@all" dropValue="#{node.dataItem}"
                                               dropListener="#{bean.processDrop}" render="@form" />
                              <h:outputText value="#{node.label}" />
                           </a4j:outputPanel>
                        </rich:treeNode>
                        <rich:treeNode type="MyParentChildEntity">
                           <a4j:outputPanel styleClass="drag-item">
                              <rich:dragSource type="item" dragValue="#{node.dataItem}" />
                              <rich:dropTarget acceptedTypes="@all" dropValue="#{node.dataItem}"
                                               dropListener="#{bean.processDrop}" render="@form" />
                              <h:outputText value="#{node.label}" />
                           </a4j:outputPanel>
                        </rich:treeNode>
                     </rich:tree>
                  </rich:panel>
               </div>

               <div style="width:85%; float:left; ">
                  <rich:extendedDataTable id="table" value="#{bean.table.tableList}" var="item"
                                          style="height:380px;" styleClass="wh-table" rowClass="wh-table-row"
                                          selectionMode="single" selection="#{bean.table.selectionRowKeys}">
                     <a4j:ajax execute="@this" event="selectionchange" listener="#{bean.table.processSelectionChange}"
                               render="table-footer"/>

                     <f:facet name="header" >
                        <rich:dropDownMenu mode="ajax" render="@form" popupWidth="150">
                           <f:facet name="label">
                              <h:graphicImage value="../icons/options.png"/>
                           </f:facet>
                           <rich:menuItem label="New" icon="../icons/new.gif" iconDisabled="../icons/new.gif"
                                          action="#{bean.command}"/>
                           <rich:menuItem label="Edit" icon="../icons/edit.gif" iconDisabled="../icons/edit.gif" disabled="true"
                                          action="#{bean.command}"/>
                           <rich:menuItem label="Delete" icon="../icons/delete.gif" iconDisabled="../icons/delete.gif"
                                          action="#{bean.command}"/>
                        </rich:dropDownMenu>
                        <h:outputText value="Table Header" styleClass="wh-header-text"/>
                     </f:facet>

                     <f:facet name="footer">
                        <div id="table-footer" class="wh_button_pane">
                           <a4j:commandButton value="New" style="background-image: url('../icons/new.gif');" execute="@this"
                                              action="#{bean.command}" type="submit">
                              <rich:componentControl event="click" target="dialog" operation="show"/>
                           </a4j:commandButton>
                           <a4j:commandButton value="Edit" style="background-image: url('../icons/edit.gif');"  execute="@this" disabled="true"
                                              action="#{bean.command}" type="submit"/>
                           <a4j:commandButton value="Delete" style="background-image: url('../icons/delete.gif');" execute="@this"
                                              action="#{bean.command}" type="submit"/>
                        </div>
                     </f:facet>

                     <rich:column id="label" width="12em">
                        <f:facet name="header">
                           <h:outputText value="Label"/>
                        </f:facet>
                        <a4j:outputPanel styleClass="drag-item" >
                           <rich:dragSource type="item" dragValue="#{item.dataItem}" />
                           <rich:dropTarget acceptedTypes="@all" dropValue="#{item.dataItem}"
                                            dropListener="#{bean.processDrop}" render="@form" />
                           <h:outputText value="#{item.label}" />
                        </a4j:outputPanel>
                     </rich:column>
                     <rich:column id="levelIndent" width="7em">
                        <f:facet name="header">
                           <h:outputText value="Level Indent"/>
                        </f:facet>
                        <h:outputText value="#{item.levelIndent()}>" />
                     </rich:column>
                     <rich:column id="level" width="5em">
                        <f:facet name="header">
                           <h:outputText value="Level"/>
                        </f:facet>
                        <h:outputText value="#{item.level}" />
                     </rich:column>
                     <rich:column id="isleaf">
                        <f:facet name="header">
                           <h:outputText value="Leaf"/>
                        </f:facet>
                        <h:outputText value="#{item.leaf}" />
                     </rich:column>
                     <rich:column id="type" width="10em">
                        <f:facet name="header">
                           <h:outputText value="Type"/>
                        </f:facet>
                        <h:outputText value="#{item.type}" />
                     </rich:column>
                     <rich:column id="name" width="12em">
                        <f:facet name="header">
                           <h:outputText value="Name"/>
                        </f:facet>
                        <h:outputText value="#{item.dataItem.name}" />
                     </rich:column>
                     <rich:column id="number">
                        <f:facet name="header">
                           <h:outputText value="Number"/>
                        </f:facet>
                        <h:outputText value="#{item.dataItem.number}" />
                     </rich:column>
                  </rich:extendedDataTable>
               </div>
               <rich:popupPanel id="dialog" modal="true" resizeable="true" moveable="true"
                                minHeight="150" minWidth="200" height="300" width="400"
                                onmaskclick="#{rich:component('dialog')}.hide()">
                  <f:facet name="header">
                     <h:outputText value="Edit Dialog" />
                  </f:facet>
                  <f:facet name="controls">
                     <h:outputLink value="#" onclick="#{rich:component('dialog')}.hide(); return false;">
                        X
                     </h:outputLink>
                  </f:facet>
                  <p>You can also check and trigger events if the use clicks outside of the
                     panel.</p>
                  <p>In this example clicking outside closes the panel.</p>
               </rich:popupPanel>
            </h:form>
         </ui:define>
      </ui:composition>
   </body>
</html>